<template>
  <section class="register-container">
    <div>
      <a href="/" class="iconfont icon-close1" ></a>
      <div class="user-head-img">
        登录
      </div>
      <div>
        <input class="input65" type="tel" v-model="phone" placeholder="请输入手机号">
      </div>
      <div>
        <input class="input65" type="password" v-model="pwd" placeholder="请输入密码">
      </div>
      <div class="orange-btn" @click="login()">
        登录
      </div>
      <a class="none-btn" href="/login/register">
        注册
      </a>
    </div>
  </section>
</template>

<script>
  import modal from '~/components/modal.vue'
  import {userApi} from "../../api/user.js"

  export default {
    components: {
      modal
    },
    data(){
      return {
        phone:'',pwd:'',showPwd:"password",msg:{},
      }
    },
    mounted(){
      const that = this
    },
    methods:{
      login(){
        let that = this
        let user = {
          phone: this.phone,
          pwd: this.pwd
        }
        userApi.login(user).then(function (res) {
          if(res.data.success){
            console.log(res.data.token);
            localStorage.token = res.data.token
            localStorage.userInfo = JSON.stringify(res.data.userInfo)
            that.msg={
              type:2,text:"登录成功"
            }
            setTimeout(function () {
              that.$router.push({path:'/'})
            },500)
          }
        })
      },
      check(){

      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/base.scss";
  .register-container {
    text-align: center;
    padding-top:60px;
    a.iconfont.icon-close1 {
      position:  absolute;
      top: 15px;
      right: 15px;
      text-decoration:  none;
      font-weight:  700;
      color: #fc3;
    }
    .user-head-img {
      line-height:  100px;
      font-size:  22px;
      color: #4a4a4a;
    }
    .input65 {
      line-height: 40px;
      border: 1px solid #f0f0f0;
      width: $size295;
      margin:8px auto;
      outline: none;
      padding:0 10px;
    }
    .orange-btn {
      background: #ffcc00;
      border:0 solid #ffcc00;
      border-radius:50px;
      line-height: 40px;
      font-size:  18px;
      width:  80%;
      margin:  30px auto 15px;
      color:  #4a4a4a;
    }
    .none-btn{
      color: #666;
      text-decoration: none;
    }
  }

</style>
